<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
    <style>
        /* 王悦209000154 */
        body{
            background-color: #f5f5f5;
           
        }
        #app{
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            display: flex;
        }
        .image{
            margin-top: 20px;
            margin-left: 50px;
            width:290px;
            height: 780px;
            background-color: #fff;
            background-image: url(./实验2资源包/ad1.png);
            float: left;
            position: absolute;
            
        }
        #box1{
           width: 1100px;
           margin-top: -5px;
            float: left;
            position: absolute;
            margin-left: 320px;
            background-color:#f5f5f5;
        }
        #box1 li{
            width: 250px;
            height: 381px;
            background-color: #fff;
            float: left;
            margin-left: 10px;
            list-style-type: none;
            text-align: center;
            margin-top: 10px;
        }
    .message{
        /* width: 100px; */
        font-size: 20px;
        color:#cbced0;
        margin-left: 50px;
        position: relative;
    }
    .message1{
        height: 20px;
        color:#000;
        font-size: 16px;
        margin-left: 1200px;
        z-index: 1;
       
    }
    .message1 a:hover{
        color: #ffac38;

    }
    .message1 a{
        color: #000;
    }
    .phonemessage{
        background-color: #fff;
        
    }
    .item1{
        color: #000;
        font-size: 16px;
    }
    .item2{
        color: #7a7c79;
            font-size: 12px;
    }
    .item3 a{
        color: #ffac38;
          margin-top: 30px;
            font-weight: bold;
            text-decoration: none;

    }
   

    </style>
   
</head>

<body>
    <div id="app"></div>
    <template id="root">
      
        <div >
            <div class="message">手机  <span class="message1"><a href="#">查看更多></a></span></div>
          
            <div class="image"></div>
            <div id="box1">
            <ul  >
                <li v-for="(item,index) in phoneList"><img :src="item.img" alt="">
                    <p class="phonemessage"><span class="item1">{{item.title}}</span>
                        <br><span class="item2">{{item.des}}</span>
                        <p class="item3"><a href="#">{{item.price}}</a></p></p>
                </li>
            </ul>
        </div>
        </div>
    </template>
</body>
<script>
    const app = Vue.createApp({
        template: "#root",
        data() {
            return {
                 phoneList: [
                    { id: "100081", img: "./实验2资源包/phone1.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "3299 元起" },
                    { id: "100082", img: "./实验2资源包/phone2.png", title: "xiaomi 12pro 电竞版", des: "全线拉满的冷血旗舰", price: "4699 元起" },
                    { id: "100083", img: "./实验2资源包/phone3.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "3699 元起" },
                    { id: "100084", img: "./实验2资源包/phone4.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "2999 元起" },
                    { id: "100085", img: "./实验2资源包/phone5.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "1899 元起" },
                    { id: "100086", img: "./实验2资源包/phone6.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "1799 元起" },
                    { id: "100087", img: "./实验2资源包/phone7.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "1199 元起" },
                    { id: "100088", img: "./实验2资源包/phone8.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "969 元起"},
                ]
            }

        },

   })
    const root = app.mount('#app');
</script>

</html>